<template>
	<el-card>
		<h2>{{ title }}</h2>
		<div>
			<el-form :inline="true" :model="query" @keyup.enter="find()">
				<el-form-item label="选择年份">
					<el-tree-select
						v-model="value"
						:data="options"
						value-key="id"
						check-strictly
						clearable
						:render-after-expand="false"
						:props="{ value: 'id', label: 'name', children: 'children' }"
						placeholder="请选择"
					/>
				</el-form-item>
			</el-form>
		</div>
		<div id="staff_number" style="width: 100%; height: 40vh"></div>
	</el-card>
</template>

<style scoped></style>

<script setup lang="ts" name="trendStaffNumberIndex">
import * as echarts from 'echarts'
import { ref } from 'vue'

const title = ref('员工人数')
const find = () => {}
const query = ref()
const value = ref('')
const options = [
	{
		id: '2020',
		name: '2020'
	},
	{
		id: '2021',
		name: '2021'
	},
	{
		id: '2022',
		name: '2022'
	},
	{
		id: '2023',
		name: '2023'
	}
]

const option = {
	title: {
		left: '32px',
		text: '',
		subtext: '单位（人）',
		subtextStyle: {
			height: 20
		}
	},
	grid: {
		left: '3%',
		right: '4%',
		bottom: '3%',
		containLabel: true
	},
	xAxis: {
		type: 'category',
		data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
	},
	yAxis: {
		type: 'value'
	},
	series: [
		{
			endLabel: {
				show: true,
				formatter: '2021',
				distance: 20
			},
			data: [800, 2100, 1300, 1750, 1600, 2550, 2250, 3490, 2990, 1690, 2400, 1700],
			type: 'line',
			symbolSize: 20,
			lineStyle: {
				width: 4
			},
			areaStyle: {
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
					{
						offset: 0,
						color: 'rgba(58,77,233,0.8)'
					},
					{
						offset: 1,
						color: 'rgba(58,77,233,0.3)'
					}
				])
			},
			label: {
				show: true,
				position: 'top',
				textStyle: {
					color: '#00000066'
				}
			}
		}
	]
}

setTimeout(function () {
	const chart = echarts.init(document.getElementById('staff_number'))
	chart.setOption(option)
}, 500)
</script>
